<div class="card">
    <div class="card-header">
        <h3 class="card-title">添加模板</h3>
    </div>
    <div class="card-body p-0">

        <form action="" method="post">

            <div class="card-body">
                <div class="form-group">
                    <label for="exampleInputEmail1">模板名字</label>
                    <input name="name" class="form-control" placeholder="test01">
                </div>
                <div class="form-group">
                    <label>check</label>
                    <textarea class="form-control" class="form-control" id="shellIedCheck" name="check" rows="3"
                        placeholder="健康检测脚本">
#!/bin/bash
echo "hello  check"</textarea>
                </div>

                <div class="form-group">
                    <label>makefile</label>
                    <textarea class="form-control" id="shellIedmake" name="makefile" rows="3" placeholder="make编译打包脚本">
run:
	echo "hello wolrd"
deploy:
    ansible-playbook   -i    host   playbook.yml</textarea>
                </div>



                <div class="form-group">
                    <label>playbook</label>
                    <textarea class="form-control" id="yamlIed" name="playbook" rows="3" placeholder="ansible剧本">
- hosts: all
  tasks:
  - name: ping
    ping :
  - name : hello wolrd
    shell : echo "hello wolrd"</textarea>
                </div>



            </div>

        </form>

        <div class="card-footer">
            <button onclick="push()" class="btn btn-primary">提交</button>
        </div>

    </div>

</div>


<script>


    var shellIedCheck = CodeMirror.fromTextArea(document.getElementById("shellIedCheck"), {
        lineNumbers: true,        //是否在编辑器左侧显示行号
        matchBrackets: true,      // 括号匹配
        mode: "shell",    //shell
        indentUnit: 4,             // 缩进单位为4
        indentWithTabs: true,     //
        smartIndent: true,        //自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
        styleActiveLine: true,       // 当前行背景高亮
        theme: 'monokai',         // 编辑器主题

    });

    // shellIedCheck.setSize('600px', '400px'); //设置代码框大小




    var shellIedmake = CodeMirror.fromTextArea(document.getElementById("shellIedmake"), {
        lineNumbers: true,        //是否在编辑器左侧显示行号
        matchBrackets: true,      // 括号匹配
        mode: "shell",    //shell
        indentUnit: 4,             // 缩进单位为4
        indentWithTabs: true,     //
        smartIndent: true,        //自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
        styleActiveLine: true,       // 当前行背景高亮
        theme: 'monokai',         // 编辑器主题

    });

    // shellIedmake.setSize('1000px', '400px'); //设置代码框大小





    var yamlIed = CodeMirror.fromTextArea(document.getElementById("yamlIed"), {
        lineNumbers: true,        //是否在编辑器左侧显示行号
        matchBrackets: true,      // 括号匹配
        mode: "yaml",    //yaml
        indentUnit: 4,             // 缩进单位为4
        indentWithTabs: true,     //
        smartIndent: true,        //自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
        styleActiveLine: true,       // 当前行背景高亮
        theme: 'monokai',         // 编辑器主题

    });

    // yamlIed.setSize('600px', '400px'); //设置代码框大小

    function push() {
        // "shellIedCheck": $("#shellIedCheck").val(),
        //             "shellIedmake": $("#shellIedmake").val(),
        //             "playbook": $("#playbook").val()
        var d = \$("#shellIedCheck").val()
        console.log(d)

        $.ajax({
            type: "post",
            url: 'form.cgi?action=add_template',
            dataType: "json",
            data: {
                "shellIedCheck": d

            },
            success: function (msg) {
                alert(msg)
            }
        });


    }


</script>